<template>
    <div id="app">
      <div style="padding-top: 20px;background-color: #333333;height: 70px;">
        <el-row :gutter="15">
          <el-col :span="5"><div class="grid-content" style="color: aliceblue;font-size: 25px;padding-top: 8px"><i class="el-icon-headset"></i>Tree Music</div></el-col>
          <el-col :span="2"><div class="grid-content font-style"><i class="el-icon-user"></i><router-link to="/" class="router-style">我的音乐</router-link></div></el-col>
          <el-col :span="2"><div class="grid-content font-style"><i class="el-icon-search"></i><router-link to="/SearchMusic" class="router-style">发现音乐</router-link></div></el-col>
          <el-col :span="2"><div class="grid-content font-style"><i class="el-icon-s-custom"></i><router-link to="/MyFriends" class="router-style">朋友</router-link></div></el-col>
          <el-col :span="2"><div class="grid-content  font-style"><i class="el-icon-video-play"></i><router-link to="/EveryDayListening" class="router-style">每日一听</router-link></div></el-col>
          <el-col :span="2"><div class="grid-content  font-style"><i class="el-icon-copy-document"></i><router-link to="/EveryDayViewing" class="router-style">每日一看</router-link></div></el-col>
          <el-col :span="3"><div class="grid-content " style="padding-top: 7px"><el-input v-model="input" placeholder="请输入内容" circle></el-input></div></el-col>
          <el-col :span="1"><div class="grid-content " style="padding-top: 7px"><el-button @click="searchSong" type="danger" icon="el-icon-search" circle></el-button></div></el-col>
          <el-col :span="1"><div class="grid-content  " style="padding-top: 16px;color: white"><el-link type="info" @click="login">登录</el-link></div></el-col>
          <el-col :span="4"><div class="grid-content  font-style" style="padding-top: 3px">
            <el-badge :value="999" class="item">
              <div class="demo-basic&#45;&#45;circle">
                <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
              </div>
            </el-badge></div></el-col>
        </el-row>
      </div>
      <router-view/>
      <el-dialog title="Music is life" :visible.sync="dialogTableVisible"  width="40%">
        <div style="background-color: #333333">
          <el-row :gutter="20">
            <el-col :span="10">
              <div class="keys grid-content bg-purple">
                <video style="height: 500px;width: auto;position:relative;" loop autoplay><source src="https://files.xiami.com/webh5/files/video/30b4a859bbf33d5fc708685d6ddd2a0f.123222.mp4" type="video/mp4">
                  Music
                </video>
              </div>
            </el-col>
            <el-col :span="3"><div class="grid-content "></div></el-col>
            <el-col :span="13">
              <div v-show="QRCode">
                <div class="grid-content" style="padding-top: 30px;font-size: 20px;color: #72767b">
                  扫码登录
                </div>
                <div class="grid-content " style="padding-top: 20px">
                  <img v-bind:src="myWechat" style="width: 60%;height: 60%">
                </div>
              </div>

              <div class="grid-content " style="padding-top: 20px">
                <el-link type="info" @click="passwordAndCount"  style="padding-top: 30px;font-size: 20px;color: #72767b">账号登录</el-link>
              </div>
              <div v-show="passworAnd" style="padding-top: 20px">
                <el-form  label-width="80px">
                  <el-form-item>
                    <el-input placeholder="账号"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input placeholder="密码"></el-input>
                  </el-form-item>
                  <el-form-item >
                    <el-button type="primary">登录</el-button>
                  </el-form-item>

                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>

      </el-dialog>

    </div>
</template>

<script>
  export default {
    data () {
      return {
        circleUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575791768225&di=1cec9d082e17efbfaed7592004d2f289&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2Fku%2Fp3%2FQJ6941854897.jpg",
        sizeList: ["large"],
        myWechat:'http://117.48.197.104:8888/group1/M00/00/02/wKgAA14Da5qAb3aQAAChFEu_DZY136.jpg',
        input:'',
        searchResultList:[],
        dialogTableVisible:false,
        QRCode:true,
        passworAnd:false,
        songArray:[
          {
            songName:'晴天',
            songActor:'周杰伦',
            songPublishTime:'2003.7.31',
          },
          {
            songName:'夜曲',
            songActor:'周杰伦',
            songPublishTime:'2003.7.31',
          },
          {
            songName:'稻香',
            songActor:'周杰伦',
            songPublishTime:'2003.7.31',
          },
          {
            songName:'时光',
            songActor:'许巍',
            songPublishTime:'2005.4.1',
          },
          {
            songName:'漫步',
            songActor:'许巍',
            songPublishTime:'2005.4.1',
          }
        ]
      }
    },
    methods:{
      searchSong(){
        if (this.input === ''){
          this.$message("亲,请输入搜索内容哟");
        }else {
          const getSearchResult = [];
          for (let i = 0 ; i < this.songArray.length ; i++){
            if (this.songArray[i].songName === this.input || this.songArray[i].songActor === this.input){
              getSearchResult.push(this.songArray[i]);
            }
          }
          this.searchResultList = getSearchResult;
          this.$router.push({
            name:'SearchResult',
            params:{
              searchResult:this.searchResultList,
            }
          })
        }
      },

      /**
       * 登录弹出框
       */
      login(){
        this.dialogTableVisible = true
      },

      /**
       * 账号密码登录
       */
      passwordAndCount(){
        this.QRCode = false;
        this.passworAnd = true;
      }
    }
  }
</script>

<style>


  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .font-style{
     padding-top: 13px;font-size: 17px;color: aliceblue;text-decoration: none;
  }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: black;
}

#nav a.router-link-exact-active {
  color: black;
}

  .router-style{
    text-decoration: none;
    color: white;
  }

</style>
